<template>
	<div id="userM-main">
		<div class="content">
			<div class="userInfo-con">
				<div class="con-top">
					<span>账户安全</span>
				</div>
				<div 
				class="con-footer"
				v-for="(item, index) in dataList"
				:key="index"
				>
					<div class="con-left">
						<div class='con-left-title'><a href="JavaScript:">{{ item.title }}</a></div>
						<div class='con-left-info'>{{ item.info }}</div>
					</div>
					<div class="con-right">
						<a href="JavaScript:">{{ (item.info ==='' && item.title !=='密码')  ? '编辑' : '修改' }}</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				dataList:[
					{
						name:'周涛666',
						info:'周涛666',
						title:'姓名'
					},
					{
						daihao:'周涛',
						info:'周涛',
						title:'守望者代号'
					},
					{
						pass:'',
						info:'',
						title:'密码'
					},
					{
						email:'123@qq.bom',
						info:'123@qq.bom',
						title:'邮箱'
					},
					{
						
						title:'电话号码',
						info:'13628495620',
						phoneNum:'13628495620'
					},
					{
						
						title:'学校或单位',
						info:'长江师范学院',
						address:'长江师范学院'
					},
					{
						
						title:'QQ',
						info:'1261974655',
						QQ:'1261974655'
					}
				]
			}
		}
	}
</script>

<style scoped="scoped">
	#userM-main{
		height: 100%;
	}
	.content{
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
	.userInfo-con{
		max-width: 600px;
	}
	.con-top{
		padding-left: 20px;
		text-align: left;
		line-height: 40px;
		border-bottom: 1px solid #ccc;
	}
	.con-footer{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
	}
	.con-right{
		width: 100px;
		text-align: center;
	}
	.con-right a{
		text-decoration: none;
		color: #CCCCCC;
	}
	.con-left-title{
		min-width: 140px;
	}
	.con-left-title a{
		text-decoration: none;
		color:#000000 ;
	}
	.con-left{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
